<template>
  <div>
    问答
    <hr />
    <img :src="uploadImg" alt="" />
    <!-- 
      before-read:读取前，作用：限制上传前的文件大小与类型等，它需要return boolean值，return：true:正常上传  false:中止上传
      after-read:读取文件后，拿到读取文件的base64与file文件对象 ，常用于后端接口请求上传文件  -->
    <van-uploader :before-read="beforeRead" :after-read="afterRead"
      >上传</van-uploader
    >
  </div>
</template>
<script>
export default {
  data () {
    return {
      uploadImg: ''
    }
  },
  methods: {
    beforeRead (file) {
      // 限制图片大小在0.01kb内
      // file文件对象，size:字节单位   file.size/1024<0.01
      const limitImg = file.size / 1024 < 1024
      // console.log('beforeRead', file)
      if (!limitImg) {
        this.$toast.fail('请上传1Mb以内的图片')
      }
      // 限制文件类型
      const limitType = file.type === 'image/jpeg'
      if (!limitType) {
        this.$toast.fail('请上传jpg的图片')
      }
      return limitImg && limitType
    },
    afterRead (res) {
      this.uploadImg = res.content
      // console.log(res)
    }
  }
}
</script>
<style></style>
